<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.star{
			background: url(http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/star.png) ;
			height: 20px;
			width: 95px;
			position: relative;
			float: left;
		}
		.star a{
			width: 19px;
			height: 20px;
			float: left;
			text-indent: -9999em;
			position: relative;
			z-index: 1;
		}

		.star .inner{
			background: url(   ) 0 20px;
			height: 19px;
			position: absolute;
			left: 0;
			top:0;
		}
		.star-1 .inner{width: 19px;}
		.star-2 .inner{width: 38px;}
		.star-3 .inner{width: 57px;}
		.star-4 .inner{width: 76px;}
		.star-5 .inner{width: 95px;}
		#show{
			font: normal 16px/20px 'Microsoft Yahei';
			width: 200px;
			float: left;
			margin-left: 1em;
		}
	</style>
</head>
<body>
	<div class="star" id="star">
		<div class="inner"></div>
		<a href="javascript:void(0);" title="滚粗，神马玩意儿？">1</a>
		<a href="javascript:void(0);" title="差评，赶紧回炉吧！">2</a>
		<a href="javascript:void(0);" title="一般，凑合折腾呗。">3</a>
		<a href="javascript:void(0);" title="不错，值得鼓励哦！">4</a>
		<a href="javascript:void(0);" title="狂赞，业界良心啊！">5</a>
	</div>
	<div id="show"></div>
<script>
	var p = document.getElementById( 'star' ), stars = p.children, inner = stars[0], 
		show = document.getElementById('show');

	for (var i = 1; i < stars.length; i++) {
		(function(el,i){
			el.onmouseover = function(){
				inner.style.width = 20*i+'%';
				show.innerHTML = this.title;
			},
			el.onclick = function(){
				p.className='star star-'+i;
				show.title = this.title;
			}
		})(stars[i],i);
	}
	p.onmouseout = function(){
		if( this.className.indexOf('star-') == -1 ){
			inner.style.width = '0';
			show.innerHTML = '';
		}else{
			show.innerHTML = show.title;
		}
	};

</script>
</body>
</html>